<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>发布</title>

    <script src="/js/axios.min.js"></script>
    <script src="/js/jquery/jquery.js"></script>

    <!-- import Vue before Element -->
    <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
    <!-- import JavaScript -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="/js/utils/request.js"></script>

    <!-- 引入elment-ui样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="/css/banner.css"/>

    <link href="https://cdn.bootcdn.net/ajax/libs/normalize/8.0.1/normalize.min.css" rel="stylesheet">
    <link href="https://unpkg.com/@wangeditor/editor@latest/dist/css/style.css" rel="stylesheet">
    <script src="https://unpkg.com/@wangeditor/editor@latest/dist/index.js"></script>

    <script src="/js/forum/login.js"></script>

    <style type="text/css" lang="scss">
        em {
            color: red;
            font-style: normal;
        }
        a{
            color: #222222;
        }
        .block {
            height: 40px;
        }
        a{
            color:  #FF8800;
        }
        a:hover {
            color: #25A5F7;
        }
        #headText{
            float:right;
            font-size:16px;
            color: #FF8800;
            text-align: center;
            margin-left: 5px;
            line-height: 40px;
        }
        #headText:hover{
            color: #25A5F7;
        }
        #headTool {
            position: fixed;
            width:100%;
            background-color: rgb(245, 245, 245);
            border-bottom: 1px solid #e8e8e8;
            margin-bottom: 40px;
            z-index: 999;
        }
        #editor-toolbar {
            width: 1350px;
            background-color: white;
            margin: 0 auto;
        }

        #content {
            height: calc(100% - 40px);
            background-color: rgb(245, 245, 245);
            overflow-y: scroll;
            position: relative;
        }
        #editor-container {
            width: 850px;
            margin: 120px auto 150px auto;
            background-color: #fff;
            padding: 20px 50px 50px 50px;
            border: 1px solid #e8e8e8;
            box-shadow: 0 2px 10px rgb(0 0 0 / 12%);
        }
        #title-container {
            padding: 20px 0;
            border-bottom: 1px solid #e8e8e8;
        }
        #title-container input {
            font-size: 30px;
            border: 0;
            outline: none;
            width: 100%;
            line-height: 1;
        }
        #editor-text-area {
            min-height: 900px;
            margin-top: 20px;
        }
        #button {
            color: white;
            background-color: #FF8800;
        }
    </style>
</head>
<body>

<div id="app">

    <div id="headTool">
        <div style="background-color: white;height: 70px;box-shadow: 0 1px 7px rgba(0,0,0,.3);z-index: 1002;position: relative;">
            <div style="float:left;">
                <div class="logo" style="float: left;margin-left: 20px;height: 70px;">
                    <img height="60px" src="/img/icon/heima.png" alt="1"/>
                    <span>
                      <div class="logo-ch"style="height: 35px;line-height: 35px;text-align:center;">龙云论坛</div>
                      <div class="logo-en">www.longyun.com</div>
                    </span>
                </div>
                <div style="float: right;margin-left:70px;height: 60px;text-align:center;line-height: 60px">
                    <font style="font-size: 24px;color: #FF8800;font-weight: bold">发布主题帖</font>
                </div>
            </div>
            <div style="float: right;margin-right: 100px;margin-top:10px;height: 60px">
                <span style="float: left;text-align: center;height:60px;margin-right: 25px;cursor: pointer;">
                        <div v-if="this.userInfo.userId == ''">
                            <span class="demo-basic--circle" style="text-align: center;line-height: 70px">
                                <div @click="dialogVisible = true" class="block"><el-avatar size="large">登 录</el-avatar></div>
                            </span>
                        </div>
                        <div v-if="this.userInfo.userId != ''">
                            <el-dropdown size="small" placement="bottom">
                                <span class="el-dropdown-link">
                                    <div style="float: left">
                                        <span class="demo-basic--circle" style="float: left;text-align: center;line-height: 70px">
                                            <div class="block" v-if="userInfo.headPortrait">
                                                <el-avatar size="large" fit="scale-down" :src=this.userInfo.headPortrait></el-avatar>
                                            </div>
                                            <div class="block" v-else>
                                                <el-avatar size="large" fit="scale-down" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"></el-avatar>
                                            </div>
                                        </span>
                                    </div>
                                    <div id="headText" style="">{{this.userInfo.userName}}</div>
                                </span>
                                <el-dropdown-menu slot="dropdown">
                                    <el-dropdown-item><div style="text-align: center"></div></el-dropdown-item>
                                    <el-dropdown-item><span @click="">个人主页</span></el-dropdown-item>
                                    <el-dropdown-item><span @click="">账户设置</span></el-dropdown-item>
                                    <el-dropdown-item><span @click="logout()">退出登录</span></el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>
                        </div>
                </span>
                <span style="text-align: center;line-height: 40px;margin-right: 15px">
                    <a href="/index.html"><i class="el-icon-s-home">&nbsp首页</i></a>
                </span>
                <span style="text-align: center;line-height: 40px;margin-right: 15px">
                    <a href="/forum/setting"><i class="el-icon-s-tools">&nbsp设置</i></a>
                </span>
                <span style="text-align: center;line-height: 40px;margin-right: 15px">
                     <a href="/forum/getEdit"><i class="el-icon-circle-plus">&nbsp发布</i></a>
                </span>
            </div>
        </div>
        <div id="editor-toolbar"></div>
    </div>

    <div id="content">
        <div id="editor-container">
            <form :model="params">
                <div id="title-container">
                    <input v-model="params.title" placeholder="输入主题帖标题（5~100字）" maxlength="100" minlength="5">
                </div>
            </form>
            <div id="editor-text-area"></div>
        </div>
    </div>

    <div style="position: fixed;line-height: 60px;left:0;right:0;bottom: 0px;width: 100%;background-color: white">
        <div style="width: 30%;float: left;"></div>
        <div style="width: 38%;float: right">
            <span style="margin-right: 50px;"><font style="color: #FF8800;">共计输入&nbsp<span id="total-length"></span>&nbsp字</font></span>
            <span style="text-align: right;">
                <el-button id="button" type="warning" icon="el-icon-position" plain @click="toPublish">发布</el-button>
            </span>
        </div>
    </div>



    <div id="loginDialog">
        <el-dialog
                custom-class="customClass"
                center
                title="replace"
                :visible.sync="dialogVisible"
                width="40%">
            <template slot='title'>
                    <span>
                      <div class="logo-ch" style="margin-bottom: 10px"><font style="color: #FF8800;font-size:35px;font-weight:700">龙云论坛</font></div>
                      <div class="logo-en"><font style="font-size:20px;color: #999999">www.longyun.com</font> </div>
                    </span>
            </template>
            <div class="digTop">
                <el-tabs v-model="activeName" type="card" >
                    <el-tab-pane label="登录" name="login">
                        <div id="head" style="width: 50%;margin: 0 auto;">
                            <el-form ref="form1" :model="form" label-width="80px" :rules="rules">
                                <el-form-item label="用户账号" prop="userAccount">
                                    <el-input v-model="form.userAccount" placeholder="请输入您的账号"></el-input>
                                </el-form-item>
                                <el-form-item label="密码" prop="password">
                                    <el-input v-model="form.password" show-password placeholder="请输入密码"></el-input>
                                </el-form-item>
                            </el-form>
                            <div style="margin: 0 auto;text-align: center">
                                <el-button type="success" plain @click="login">立即登录</el-button>
                            </div>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="注册" name="second">
                        <div style="width: 50%;margin: 0 auto;">
                            <el-form ref="form2" :model="user" label-width="80px" status-icon :rules="rules">
                                <el-form-item label="用户账号" prop="userAccount">
                                    <el-input v-model="user.userAccount" placeholder="请输入您的账号"></el-input>
                                </el-form-item>
                                <el-form-item label="昵称" prop="userName">
                                    <el-input v-model="user.userName" placeholder="请填写昵称"></el-input>
                                </el-form-item>
                                <el-form-item label="密码" prop="password">
                                    <el-input v-model="user.password" show-password placeholder="请输入密码"></el-input>
                                </el-form-item>
                                <el-form-item label="确认密码" prop="checkPass">
                                    <el-input v-model="user.checkPass" show-password placeholder="请再次输入密码"></el-input>
                                </el-form-item>
                            </el-form>
                            <div style="margin: 0 auto;text-align: center">
                                <el-button type="success" plain @click="register">立即注册</el-button>
                            </div>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </div>
        </el-dialog>
    </div>
</div>


<script>
    // 设置后台服务地址
    axios.defaults.baseURL = "http://192.168.2.188:8089";
    axios.defaults.timeout = 3000;

    let app = new Vue({
        el: "#app",
        data() {
            var editor;
            var validatePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入密码'));
                } else {
                    if (this.user.checkPass !== '') {
                        this.$refs.user.validateField('checkPass');
                    }
                    callback();
                }
            };
            var validatePass2 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.user.password) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };
            return {
                // 登录表单
                form: {
                    userAccount:"",
                    userName:"",
                    password:"",
                },
                // 注册表单
                user: {
                    userAccount:"",
                    userName: "",
                    password:"",
                    checkPass:"",
                },
                // 用户信息
                userInfo: {
                    userId:"",
                    userName: "",
                    headPortrait:"",
                },
                activeName: 'login',
                dialogVisible: false,
                params: {
                    content: "", // 帖子内容
                    contentHtml: "", // 帖子内容html
                    userId: "",
                    userName: "",
                    title:"",
                    fontNumber:"0",
                },
                rules: {
                    userAccount: [
                        {required: true, message: "账号不能为空", trigger: "blur"}
                    ],
                    password: [
                        {required: true, message: "密码不能为空", trigger: "blur"}
                    ],
                    userName:[
                        {required: true, message: "请填写一个昵称", trigger: "blur"}
                    ],
                    password:[
                        {validator: validatePass, trigger: 'blur'}
                    ],
                    checkPass:[
                        {validator: validatePass2, trigger: 'blur'}
                    ]
                },
            }
        },
        methods: {
            // 登录
            login() {
                if(this.form.userAccount == ''){
                    this.$message({
                        message: '请输入用户账号！',
                        type: 'warning'
                    });
                    return;
                }
                if(this.form.password == ''){
                    this.$message({
                        message: '请输入密码！',
                        type: 'warning'
                    });
                    return;
                }
                instance.post("/user/login", this.form)
                    .then(data => {
                        if (data.data.success) {
                            this.$message({
                                message: '登录成功！',
                                type: 'success'
                            });
                            this.dialogVisible = false;
                            this.form = {};
                            //全局存储token
                            localStorage.setItem("token",data.data.data);
                            this.getUserInfo();
                        } else {
                            this.$message.error('登录失败，' + data.data.errorMsg);
                        }
                    }).catch(e => {
                    this.$message.error('登录失败，请检查网络！');
                });
            },
            // 注册
            register() {
                if(this.user.userAccount == '' || this.user.userName == '' || this.user.password == '' || this.user.checkPass == ''){
                    this.$message({
                        message: '请填写完整表单信息',
                        type: 'warning'
                    });
                    return;
                }
                if( this.user.password != this.user.checkPass){
                    this.$message({
                        message: '两次输入密码不一致！',
                        type: 'warning'
                    });
                    return;
                }
                instance.post("/user/register", this.user)
                    .then(data => {
                        if (data.data.success) {
                            this.$message({
                                message: '注册成功,请进行登录！',
                                type: 'success'
                            });
                        } else {
                            this.$message.error('注册失败，' + data.data.errorMsg);
                        }
                    }).catch(e => {
                    this.post = []
                });
            },
            // 退出登录
            logout() {
                instance.post("/user/logout")
                    .then(data => {
                        if (data.data.success) {
                            this.$message({
                                message: '退出登录成功！',
                                type: 'success'
                            });
                            this.dialogVisible = false;
                            this.form = {};
                            // 删除token
                            localStorage.removeItem("token");
                            this.getUserInfo();
                        } else {
                            this.$message.error('退出登录失败，' + data.data.errorMsg);
                        }
                    }).catch(e => {
                    this.$message.error('退出失败，请检查网络！');
                });
            },
            // 获取用户信息
            getUserInfo() {
                instance.get("/user/getUserInfo",)
                    .then(data => {
                        if (data.data.success) {
                            this.dialogVisible = false;
                            this.userInfo = data.data.data;
                            this.userInfo.userId = data.data.data.id;
                            //刷新token
                            localStorage.setItem("token",data.data.data.jwt);
                        } else{
                            if(data.data.errorCode === 20012){
                                this.toLogin();
                                return;
                            } else{
                                if(data.data.errorCode != 2001){
                                    this.$message({
                                        type: 'error',
                                        message: '错误：'+ data.data.errorMsg
                                    });
                                }
                            }
                            this.userInfo = {
                                userId:"",
                                userName: "", // 用户信息
                                headPortrait:"",
                            }
                        }
                    }).catch(e => {
                    this.userInfo = {
                        userId:"",
                        userName: "", // 用户信息
                        headPortrait:"",
                    }
                });
            },

            toLogin() {
                this.$confirm('登录信息已过期，是否重新登录?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.dialogVisible = true;
                    return;
                }).catch(() => {
                    return;
                });
            },

            // 发布内容
            toPublish(){
                const html = editor.getHtml();
                const content = editor.getText();

                if(this.params.title == '' || this.params.title.length < 5){
                    this.$message({
                        message: '请输入五字以上标题！',
                        type: 'warning'
                    });
                    return;
                }
                if(content == ''){
                    this.$message({
                        message: '请输入内容！',
                        type: 'warning'
                    });
                    return;
                }

                this.params.content = content;
                this.params.contentHtml = html;
                this.params.userId = this.userInfo.id;
                this.params.userName = this.userInfo.userName;
                instance.post("/forum/toPublish",this.params)
                    .then(data => {
                        if(data.data.code == '401'){
                            this.$alert('请先登录！', '提示', {
                                confirmButtonText: '确定',
                                callback: action => {
                                    this.dialogVisible = true;
                                }
                            });
                            return;
                        }
                        if (data.data.success) {
                            this.$alert(data.data.errorMsg, '提示', {
                                confirmButtonText: '确定',
                                callback: action => {
                                    window.location.href = './detail.html?id='+data.data.data;
                                }
                            });
                        } else {
                            this.$message.error('发布失败，' + data.data.errorMsg);
                        }
                    }).catch(e => {
                    this.$message.error('发布失败，请检查网络！');
                });
            }
        },

        mounted() {
            this.getUserInfo();

            const E = window.wangEditor

            // 切换语言
            const LANG = location.href.indexOf('lang=en') > 0 ? 'en' : 'zh-CN'
            E.i18nChangeLanguage(LANG)

            const editorConfig = {
                placeholder: 'Type here...',
                scroll: false, // 禁止编辑器滚动
                MENU_CONF: {
                    uploadImage: {
                        fieldName: 'your-fileName',
                        base64LimitSize: 10 * 1024 * 1024 // 10M 以下插入 base64
                    }
                },
                onChange(editor) {
                    const text = editor.getText().replace(/\n|\r/mg, '');
                    document.getElementById('total-length').innerHTML = text.length;
                }
            }

            // 先创建 editor
            editor = E.createEditor({
                selector: '#editor-text-area',
                content: [],
                // html: '',
                config: editorConfig
            })

            // 创建 toolbar
            const toolbar = E.createToolbar({
                editor,
                selector: '#editor-toolbar',
                config: {
                    excludeKeys: 'fullScreen',
                }
            })

            // 点击空白处 focus 编辑器
            document.getElementById('editor-text-area').addEventListener('click', e => {
                if (e.target.id === 'editor-text-area') {
                    editor.blur()
                    editor.focus(true) // focus 到末尾
                }
            })
        }

    })


</script>

</body>
</html>